<template>
  <div class="read">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="###"><b>BILL</b> 财务管理 </a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <router-link to="/">
                  <a class="nav-link" href="###">录入（主页）</a>
              </router-link>
            </li>

            <li class="nav-item">
              <router-link to="/read">
                  <a class="nav-link active" href="###">查看</a>
              </router-link>
            </li>

            <li class="nav-item">
              <router-link to="/manage">
                  <a class="nav-link" href="###">管理</a>
              </router-link>
            </li>
          </ul>

          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search" v-model="keyword" @:input="update" @input.enter="search">
            <button class="btn btn-outline-primary iconfont" type="button" @click="search">&#xe63a;</button>

            <select class="form-select" aria-label="Default select example" v-model="select" @click="selectOne">
              <option value="1" selected>表</option>
              <!-- <option value="2">图</option> -->
              <option value="3">收入</option>
              <option value="4">支出</option>
            </select>

          </form>
          
        
        </div>
      </div>
    </nav>

    <div class="main">
      <!-- <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
            <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" v-model="out" value="out-in">
            <label class="btn btn-outline-primary" for="btnradio1">收支</label>

            <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" v-model="out" value="out">
            <label class="btn btn-outline-primary" for="btnradio2">支出</label>

            <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off" v-model="out" value="in">
            <label class="btn btn-outline-primary" for="btnradio3">收入</label>
        </div> -->

        <!-- <div class="btn-group btn-group-1" role="group" aria-label="Basic radio toggle button group">
          <input type="radio" class="btn-check" name="btnradio1" id="btnradio4" autocomplete="off" v-model="date" value="today">
          <label class="btn btn-outline-primary" for="btnradio4">今天</label>

          <input type="radio" class="btn-check" name="btnradio1" id="btnradio5" autocomplete="off" v-model="date" value="week">
          <label class="btn btn-outline-primary" for="btnradio5">本周</label>

          <input type="radio" class="btn-check" name="btnradio1" id="btnradio6" autocomplete="off" v-model="date" value="month">
          <label class="btn btn-outline-primary" for="btnradio6">一个月</label>

          <input type="radio" class="btn-check" name="btnradio1" id="btnradio7" autocomplete="off" v-model="date" value="three">
          <label class="btn btn-outline-primary" for="btnradio7">三个月</label>

          <input type="radio" class="btn-check" name="btnradio1" id="btnradio8" autocomplete="off" v-model="date" value="six">
          <label class="btn btn-outline-primary" for="btnradio8">六个月</label>

          <input type="radio" class="btn-check" name="btnradio1" id="btnradio9" autocomplete="off" v-model="date" value="year">
          <label class="btn btn-outline-primary" for="btnradio9">一年</label>
        </div> -->

        <ul>
            <li>
              <div class="small"> 名称</div>
              <div>日期</div>
              <div class="small">价格</div>
              <div class="small">数量</div>
              <div class="small">费用</div>
              <div>备注</div>
            </li>

            <li class="bills iconfont" v-for="item in list" :key="item">
              <span v-html="item.icon"></span>   
              <div class="small">{{item.name}}</div>
              <div>{{item.data}}</div>
              <div class="small">{{item.price}}</div>
              <div class="small">{{item.number}}</div>
              <div class="small" :class="{'act': !item.type,'unact': item.type}">{{item.price * item.number}}</div>
              <div>{{item.remarks}}</div>
            </li>

            <li class="all" v-show="!mess">
              <span>合计：</span>
              <span class="money">{{all}}</span>
            </li>

            <p>{{mess}} <router-link to="/login" v-show="login">登录</router-link></p>
        </ul>
    </div>
    
</div>
</template>

<script lang="ts">
import qs from 'qs'
import axios from 'axios'
import {useStore} from 'vuex'
import { defineComponent, ref } from 'vue';

export default defineComponent({
    name: 'read',
    components: {

    },
    setup() {
      const mess = ref()
      const store = useStore()
      const login = ref(false)

      //获得初始list即全部账单数据
      const list:any = ref([])
      axios.post(`/api/zhangdanList`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {
        if (res.status === 200) {
          list.value = res.data
          if(list.value == "") {
            mess.value = "内容为空"
            if(!store.state.login) {
              mess.value = '请先'
              login.value = true
            }
          } else {
            mess.value = ""
          } 

          var money = 0
          for (var i = 0; i < res.data.length; i++) {
            if(res.data[i].type == 0) {
              money += res.data[i].number * (-res.data[i].price)
            } else if(res.data[i].type == 1) {
              money += res.data[i].number * res.data[i].price
            }
            all.value = money
          }
        }
      })

      const select = ref(1)
      const all = ref()
      const selectOne = () => {
        // console.log(select.value)
        if(select.value == 1) {
          axios.post(`/api/zhangdanList`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

            if (res.status === 200) {
              list.value = res.data
              if(list.value == "") {
                mess.value = "内容为空"
              } else {
                mess.value = ""
              } 

              var money = 0
              for (var i = 0; i < res.data.length; i++) {
                if(res.data[i].type == 0) {
                  money += res.data[i].number * (-res.data[i].price)
                } else if(res.data[i].type == 1) {
                  money += res.data[i].number * res.data[i].price
                }
                all.value = money
              }
            }
          })
        } else if(select.value == 2) {
          console.log("222")
        } else if(select.value == 3) {
          list.value = []
          axios.post(`/api/zhangdanList`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

            if (res.status === 200) {
              var money = 0
              for (var i = 0; i < res.data.length; i++) {
                if(res.data[i].type == 1) {
                  list.value.push(res.data[i])
                  // console.log(res.data[i])
                  money += res.data[i].number * res.data[i].price
                  all.value = money
                }
              }

              if(list.value == "") {
                mess.value = "内容为空"
              } else {
                mess.value = ""
              }
              
            }
          })
        } else if(select.value == 4) {
          list.value = []
          axios.post(`/api/zhangdanList`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

            if (res.status === 200) {
              var money = 0
              for (var i = 0; i < res.data.length; i++) {
                if(res.data[i].type == 0) {
                  list.value.push(res.data[i])
                  money += res.data[i].number * res.data[i].price
                  // console.log(money)
                  all.value = money
                  // console.log(all.value)
                }
                
              }

              if(list.value == "") {
                mess.value = "内容为空"
              } else {
                mess.value = ""
              }
              
            }
          })
        }
      }

      // const acts:any = ref([])

      const keyword = ref()
      //绑定input框，实时检测keword是否为空，为空则提示警告
      const update = () => {
        if(keyword.value === "") {
          axios.post(`/api/zhangdanList`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {
          if (res.status === 200) {
            list.value = res.data
            if(list.value == "") {
              mess.value = "内容为空"
              if(!store.state.login) {
                mess.value = '请先'
                login.value = true
              }
            } else {
              mess.value = ""
            } 

            var money = 0
            for (var i = 0; i < res.data.length; i++) {
              if(res.data[i].type == 0) {
                money += res.data[i].number * (-res.data[i].price)
              } else if(res.data[i].type == 1) {
                money += res.data[i].number * res.data[i].price
              }
              all.value = money
            }
          }
        })
        }
      }

      const out:any = ref([])
      const date:any = ref([])

      //根据名称进行内容搜索
      const search = () => {
        // console.log("111")
        // console.log(keyword.value)

        let postData = qs.stringify({
          name: keyword.value,
        })
        axios.post(`/api/select`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

          if (res.status === 200) {
            list.value = res.data
            if(res.data == "") {
              mess.value = "没有找到相应内容哦！"
            } else {
              mess.value = ""
            }

            var money = 0
            for (var i = 0; i < res.data.length; i++) {
              if(res.data[i].type == 0) {
                money += res.data[i].number * (-res.data[i].price)
              } else if(res.data[i].type == 1) {
                money += res.data[i].number * res.data[i].price
              }
              all.value = money
            }
          
          }
        })
      }

      return {
        list,

        select,
        all,
        selectOne,
        
        keyword,

        out,
        date,
        mess,
        login,

        update,
        search,
      }
    },
})
</script>

<style lang="stylus" scoped>
.act
  color red
.unact
  color #0d6efd
a
  text-decoration none
.read
  width 100%
  height 35rem
  margin-top -50px
  border 1px #ccc solid
  box-shadow 0 0 0.1rem rgba(131, 171, 175, 0.5)
  // background-color red
  .navbar
    width 100%
    // margin-top -50px
    margin-bottom 4rem
    .navbar-brand
      font-size 15px
      b
        color #0d6efd
        font-size 25px
    .navbar-collapse
      margin-left 30px
      a
        text-decoration none
      a:hover 
        color #0d6efd
      .active 
        color #0d6efd
      .form-control 
        height 2.2rem
        width 500px
        margin-left -100px
        // background-color #fff
      button 
        line-height 0rem
        margin-left -1.8%
        font-size 30px
        // font-size 1.5rem
      .form-select
        width 100px
        height 2.2rem
        margin-left 20px
  .main
    margin-top -4rem
    border-top 1px #666 solid
    // background-color red
    .btn-group
      width 30%
      margin-left 1rem
    .btn-group-1
      width 50%
    ul 
      padding 0
      border-top 1px #666 solid
      li
        list-style none
        line-height 2.5rem
        font-weight 700
        font-size 19px
        border-bottom 1px #eee solid
        // background-color skyblue
        div  
          display inline-block
          width 20%
          margin-left 1.5%
          // background-color red
        .small
          width 10%
          //background-color skyblue
      .bills
        font-weight 400
        position relative
        .money
          color red
        span
         font-size 20px
         position absolute
         left 100px
      .all
        display flex
        justify-content flex-end
        border-bottom 1px #eee solid 
        span
          display inline-block
          width 10%
          // background-color red
        .money
          color red
      .bills:hover
        background-color #f8f9fa
      p
        width 100%
        color red
        margin-top 10rem
        line-height 2.5rem
        // background-color red
</style>
